<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <el-container>
        <el-main class="content-main">
            <div class="ps-panel" style="height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-list"></i>
                    <span class="ps-panel-head-title">列表</span>
                    <span class="query">
                        <el-button type="primary" size="mini" @click="add">添加模型</el-button>
                    </span>
                </div>

                <div class="ps-panel-body">
                    <el-table :data="tableData" size="small" highlight-current-row stripe style="width: 100%; margin-bottom: 10px;">
                        <el-table-column prop="id" label="ID" width="50"></el-table-column>
                        <el-table-column prop="name" label="名称" width="300"></el-table-column>
                        <el-table-column prop="regular" label="正则表达式"></el-table-column>
                        <el-table-column prop="is_enable" label="是否启用" width="100">
                            <template slot-scope="scope">
                                {{scope.row['is_enable']==1 ? '启用' : '未启用'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="addtime" label="添加时间" width="150"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                                <el-popover
                                        style="margin-left: 10px;"
                                        width="160"
                                        trigger="manual"
                                        :ref="'del_popover_' + scope.row.id">
                                    <p style="text-align: center;margin: 15px 0px">确定删除吗？</p>
                                    <div style="text-align: center; margin: 0">
                                        <el-button size="mini" @click="delPopoverClose('del_popover_' + scope.row.id)">取消</el-button>
                                        <el-button type="primary" size="mini" @click="del(scope.row)">确定</el-button>
                                    </div>
                                    <el-button  type="text" slot="reference" size="small" @click="delPopoverShow('del_popover_' + scope.row.id)">删除
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                                v-if='paginations.total > 0'
                                :page-size="paginations.pageSize"
                                :layout="paginations.layout"
                                :total="paginations.total"
                                :current-page='paginations.pageIndex'
                                @current-change='jump'
                                style="text-align: right;">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-main>

        <el-dialog title="模型" :visible.sync="modelForm.visible" width="800px" class="edit">
            <el-form ref="form" :model="modelForm" :rules="modelForm.rules" label-width="100px">
                <el-form-item label="模型名称：" prop="name">
                    <el-input v-model="modelForm.name" maxlength="20" placeholder="请输入模型名称"></el-input>
                </el-form-item>
                <el-form-item label="正则式：" prop="regular">
                    <el-input v-model="modelForm.regular" maxlength="200" placeholder="请输入正则表达式"></el-input>
                </el-form-item>
                <el-form-item label="JAVA：" prop="content">
                    <el-input type="textarea" :rows="10" v-model="modelForm.content" maxlength="2000" placeholder="请输入JAVA"></el-input>
                </el-form-item>
                <el-form-item label="测试数据：" prop="content">
                    <el-input v-model="modelForm.testStr" maxlength="200" placeholder="请输入测试数据"></el-input>
                </el-form-item>
                <el-form-item label="测试结果：" prop="content">
                    <el-input type="textarea" :rows="3" v-model="modelForm.testRes" readonly placeholder="请输入JAVA"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modelForm.visible = false">取 消</el-button>
                <el-button @click="verify">验 证</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>

</template>

<script>
    export default {
        name: "index",
        data: function () {
            return {
                paginations: {
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 20,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                },
                tableData: [],
                modelForm: {
                    visible: false,
                    rules: {
                        name: [{ required: true, message: '名称不能为空'}],
                        regular: [{ required: true, message: '正则表达式不能为空'}]
                    },
                    id: 0,
                    name: '',
                    regular: '',
                    content: '',
                    is_enable: 0,
                    testStr: '',
                    testRes: ''
                }
            };
        },
        methods:  {
            jump(i) {
                if (i === undefined) {
                    i = this.paginations.pageIndex;
                } else {
                    this.paginations.pageIndex = i;
                }

                this.$store.dispatch('ajax', {url: 'api/regularModelList', method: 'get', data: {page: i, number: this.paginations.pageSize},
                    succeed:
                        (res) => {
                            this.tableData = res.rows;
                            this.paginations.total = res.total;
                        }
                });
            },
            add() {
                this.modelForm.visible = true;
                this.modelForm.id = 0;
                this.modelForm.name = '';
                this.modelForm.regular = '';
                this.modelForm.content = '';
            },
            edit(row) {
                this.modelForm.visible = true;
                this.modelForm.id = row.id;
                this.modelForm.name = row.name;
                this.modelForm.regular = row.regular;
                this.modelForm.content = row.content;
            },
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.modelForm.id === 0) {
                            this.$store.dispatch('ajax', {url: 'api/regularModelAdd', method: 'post', data: this.modelForm, succeed:
                                    () => {
                                        this.jump();
                                        this.$message.success('保存成功');
                                        this.modelForm.visible = false;
                                    }
                            });
                        } else {
                            this.$store.dispatch('ajax', {url: 'api/regularModelEdit', method: 'put', data: this.modelForm,
                                succeed: () => {
                                    this.jump();
                                    this.$message.success('保存成功');
                                    this.modelForm.visible = false;
                                }
                            });
                        }
                    }
                });
            },
            del(row) {
                this.delPopoverClose('del_popover_'+row.id);
                this.$store.dispatch('ajax', {url: 'api/regularModelDel', method: 'put', data: [row.id], succeed: () => {
                        this.jump();
                        this.$message.success('删除成功');
                        this.delPopoverClose('del_popover_'+row.id);
                    }
                });
            },
            verify() {
                this.$store.dispatch('ajax', {url: 'api/regularModelVerify', method: 'post', data: this.modelForm, succeed:
                        (res) => {
                            // this.$message.success('验证成功');
                            this.modelForm.testRes = JSON.stringify(res.testRes);
                        }
                });
            },
            delPopoverShow(ref) {
                this.$refs[ref].doShow();
            },
            delPopoverClose(ref) {
                this.$refs[ref].doClose()
            }
        },
        mounted: function () {
            this.jump(1);
        }
    }
</script>